Установка скрипта «Закреплённая шапка»

Введение


Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Этот скрипт позволяет закрепить всю шапку в верхней части экрана при прокрутке страницы вашего сайта вниз. Этот скрипт закрепляет шапку вашего сайта в верхней части в том виде, в котором вы её настроили в редакторе.
Примечание: в мобильной версии сайта шапка остаётся незакреплённой.

    Требования к установке:
  • оплаченный тариф «Премиум» или «Про» (для самостоятельной установки);

Перед установкой, сделайте бекап вашего сайта на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в режиме конструктора во вкладке Бекапы.

Установка

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:

<style>
    @media (min-width: 768px) {
        .sticky {
            z-index: 300;
            position: fixed !important;
            top: 0px !important; /* если ноль заменить на число (и в скрипте тоже), то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом. Применим, например, при фиксированном сверху меню */
        }
    }
</style>

Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>».

Затем разместите следующий код:

<script>
(function(){  // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными
	var a = document.querySelector('header'), b = null;  // селектор блока, который нужно закрепить
	window.addEventListener('scroll', Ascroll, false);
	document.body.addEventListener('scroll', Ascroll, false);  // если у html и body высота равна 100%
	function Ascroll() {
		if (b == null) {  // добавить потомка-обёртку, чтобы убрать зависимость с соседями
			var Sa = getComputedStyle(a, ''), s = '';
			for (var i = 0; i < Sa.length; i++) {  // перечислить стили CSS, которые нужно скопировать с родителя
				if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
					s += Sa [i]+ ': ' +Sa.getPropertyValue(Sa[i]) + '; '
				}
			}
			b = document.createElement('div');  // создать потомка
			b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
			a.insertBefore(b, a.firstChild);   // поместить потомка в цепляющийся блок первым
			var l = a.childNodes.length;
			for (var i = 1; i < l; i++) {   // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)
				b.appendChild(a.childNodes[1]);
			}
			a.style.height = b.getBoundingClientRect().height + 'px';  // если под скользящим элементом есть другие блоки, можно своё значение
			a.style.padding = '0';
			a.style.border = '0';  // если элементу присвоен padding или border
		}
		if (a.getBoundingClientRect().top <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
			b.className = 'sticky';
		} else {
			b.className = '';
		}
		window.addEventListener('resize', function() {
			a.children[0].style.width = getComputedStyle(a, '').width
		}, false);
	}
})()
</script>

Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>».

Сохраните код и опубликуйте ваш сайт.